<template>
    <el-divider/>
    <span>患者信息：</span>
    <el-tag class="ml-2">姓名：{{ patientInfo.realName }}</el-tag>
    <el-tag class="ml-2">病历号：{{ patientInfo.caseNumber }}</el-tag>
    <el-tag class="ml-2">年龄：{{ patientInfo.age }}</el-tag>
    <el-tag class="ml-2">性别：{{ patientInfo.gender }}</el-tag>
    <el-divider/>
    <el-icon>
        <DocumentChecked/>
    </el-icon>
    <span>病历首页</span>
    <el-divider/>
    <span>病案首页</span>
    <el-form>
        <table class="base-info">
            <tr>
                <td>主诉</td>
                <td colspan="6">
                    <el-input v-model="medicalRecord.readme"/>
                </td>
            </tr>
            <tr>
                <td>现病史</td>
                <td>
                    <el-input v-model="medicalRecord.present"/>
                </td>
            </tr>
            <tr>
                <td>现病治疗情况</td>
                <td>
                    <el-input v-model="medicalRecord.presentTreat"/>
                </td>
            </tr>
            <tr>
                <td>既往史</td>
                <td>
                    <el-input v-model="medicalRecord.history"/>
                </td>
            </tr>
            <tr>
                <td>过敏史</td>
                <td>
                    <el-input v-model="medicalRecord.allergy"/>
                </td>
            </tr>
            <tr>
                <td>体格检查</td>
                <td>
                    <el-input v-model="medicalRecord.physique"/>
                </td>
            </tr>
            <tr>
                <td>诊断</td>
                <td>
                    <el-table
                            ref="multipleTableRef"
                            :data="tableData"
                            style="width: 100%"
                            @select="addTempList"
                    >
                        <el-table-column type="selection" width="55"/>
                        <el-table-column property="diseaseCode" label="疾病编码" width="120"/>
                        <el-table-column property="diseaseName" label="疾病名称" width="120"/>
                        <el-table-column property="diseaseicd" label="国际ICD编码" show-overflow-tooltip/>
                        <el-table-column property="diseaseCategory" label="疾病类型" show-overflow-tooltip/>
                        <el-table-column align="right">
                            <template #header>
                                <el-link type="primary" @click="removeDis">删除</el-link>
                                <el-link type="primary" @click="dialogTableVisible = true;queryDiseaseByPage()">增加
                                </el-link>
                            </template>
                        </el-table-column>
                    </el-table>
                </td>
            </tr>
            <tr>
                <td>检查/检验建议</td>
                <td>
                    <el-input v-model="medicalRecord.proposal"/>
                </td>
            </tr>
            <tr>
                <td>注意事项</td>
                <td>
                    <el-input v-model="medicalRecord.careful"/>
                </td>
            </tr>
        </table>
        <el-divider/>
        <el-button type="primary" @click="saveRecord">保存</el-button>
        <el-button>清空</el-button>
    </el-form>
    <el-divider/>
  <!--    新增疾病对话框-->
    <el-dialog v-model="dialogTableVisible" title="疾病搜索" width="80%">
        <!--        疾病搜索框-->
        <div class="dialogBox">
            <div>
                <el-input
                        v-model="searchInfo"
                        placeholder="Please input"
                        class="input-with-select">
                    <!-- 搜索选择-->
                    <template #prepend>
                        <el-select v-model="searchSelect" placeholder="请选择搜索内容" style="width: 115px">
                            <el-option label="疾病名称" value="diseaseName"/>
                            <el-option label="疾病助记码" value="diseaseCode"/>
                            <el-option label="疾病类别" value="diseaseCategory"/>
                            <el-option label="国际ICD编码" value="diseaseicd"/>
                        </el-select>
                    </template>
                    <template #append>
                        <el-button :icon="Search" @click="queryDiseaseByCondition"/>
                    </template>
                </el-input>
            </div>
            <div>
                <el-divider/>
                <el-table
                        ref="multipleTableRef"
                        :data="diseaseByPage"
                        style="width: 100%"
                        height="350"
                        @select="getSelectRows"
                >
                    <el-table-column type="selection" width="55"/>
                    <el-table-column property="diseaseCode" label="疾病编码" width="120"/>
                    <el-table-column property="diseaseName" label="疾病名称" width="120"/>
                    <el-table-column property="diseaseicd" label="国际ICD编码" show-overflow-tooltip/>
                    <el-table-column property="diseaseCategory" label="疾病类型" show-overflow-tooltip/>
                </el-table>

                <div class="demo-pagination-block">
                    <el-pagination
                            v-model:current-page="currentPage"
                            v-model:page-size="pageSize"
                            :page-sizes="[2,5]"
                            :small="small"
                            :disabled="disabled"
                            :background="background"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="diseaseNum"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            hide-on-single-page="true"
                    />
                </div>

            </div>
        </div>


    </el-dialog>
</template>

<script setup>
import {DocumentChecked} from '@element-plus/icons-vue'
import {ref, reactive, provide} from "vue";
import {useRoute} from "vue-router";
import {Search} from '@element-plus/icons-vue'
import axios from "axios";

axios.defaults.baseURL = "http://localhost:8092/"
provide("axios", axios)
const dialogTableVisible = ref(false)
const currentPage = ref(1)
const pageSize = ref(5)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
//疾病信息
const diseaseInfo = ref({
    diseaseCategory: '',
    diseaseCode: '',
    diseaseName: '',
    diseaseicd: ''
})
//疾病搜索框中的内容
const searchInfo = ref('')
//疾病搜索中选择的内容
const searchSelect = ref('')
const tableData = ref([])
//分页查询后的疾病列表
const diseaseByPage = ref([])
//查询的总疾病数量
const diseaseNum = ref(0)
//选择疾病临时列表
const selectTemp = ref([])
//患者信息
const patientInfo = ref({
    caseNumber: '',
    realName: '',
    age: '',
    gender: ''
})
const medicalRecord = ref({
    registerId: '',
    readme: '',
    present: '',
    presentTreat: '',
    history: '',
    allergy: '',
    physique: '',
    proposal: '',
    careful: '',
    diagnosis: '',
    cure: ''
})

if (useRoute().query.caseNumber === undefined) {
    window.alert("请先选择患者")
} else {
    patientInfo.value.caseNumber = useRoute().query.caseNumber
    //根据患者病历号查询患者信息
    axios({
        method: 'get',
        url: 'register/queryPatientByCaseNum/' + patientInfo.value.caseNumber
    }).then(resp => {
        patientInfo.value = resp.data.data
    })
}

//疾病分页查询
function queryDiseaseByPage() {
    axios({
        method: "get",
        url: 'disease/queryDiseaseCount',
    }).then(resp => {
        diseaseNum.value = resp.data.data
    })
    //分页查询
    axios({
        method: 'get',
        url: 'disease/queryDiseaseByPage/' + currentPage.value + '/' + pageSize.value
    }).then(resp => {
        diseaseByPage.value = resp.data.data
    })
}

function handleSizeChange() {
    //分页查询
    axios({
        method: 'get',
        url: 'disease/queryDiseaseByPage/' + currentPage.value + '/' + pageSize.value
    }).then(resp => {
        diseaseByPage.value = resp.data.data
    })
}

function handleCurrentChange() {
    //分页查询
    axios({
        method: 'get',
        url: 'disease/queryDiseaseByPage/' + currentPage.value + '/' + pageSize.value
    }).then(resp => {
        diseaseByPage.value = resp.data.data
    })
}

//根据条件搜索疾病并分页查询
function queryDiseaseByCondition() {
    diseaseInfo.value[searchSelect.value] = searchInfo.value
    axios({
        method: 'post',
        url: 'disease/queryDiseaseByCondition/' + currentPage.value + '/' + pageSize.value,
        data: diseaseInfo.value
    }).then(resp => {
        diseaseByPage.value = resp.data.data
        diseaseNum.value = diseaseByPage.value.length
    })
}

function getSelectRows(selection, row) {
    let ifHava = tableData.value.some((disInfo => {
        return disInfo.id == row.id
    }));
    if (!ifHava) {
        tableData.value.push(row)
    } else {
        return
    }
}

function removeDis() {

    for (let i = 0; i < selectTemp.value.length; i++) {
        let ifHava = tableData.value.some((disInfo => {
            return tableData.value == selectTemp.value[i]
        }));
        if (!ifHava) {
            for (let j = 0; j < tableData.value.length; j++) {
                if (tableData.value[j].id == selectTemp.value[i].id) {
                    tableData.value.splice(j, 1)
                }
            }
        } else {
            return
        }
    }
}

function addTempList(selection) {
    selectTemp.value = selection
}

//保存患者诊断信息
function saveRecord() {
    medicalRecord.value.registerId = patientInfo.value.caseNumber
    axios({
        method: 'post',
        url: 'medicalRecord/saveRecord',
        data: medicalRecord.value
    }).then(resp => {
        if (resp.data.success) {
            alert("保存成功")
        }
    })
    //判断当前页面是否添加了疾病，如果添加疾病则保存疾病和患者关联信息
    if (tableData.value.length > 0) {
        console.log(tableData.value)
        axios({
            method: 'post',
            url: 'medicalRecordDisease/addDiseaseForPatient/'+medicalRecord.value.registerId,
            headers: {
                'Content-Type': 'application/json'
            },
            data: JSON.stringify(tableData.value)
        }).then(resp => {
            console.log(resp.data.success)
        })
    }
}
</script>

<style scoped>
.base-info {
    width: 100%;
}

.base-info table {
    width: 100%;
    margin: 15px 0;
    border: 0;
}

.base-info th {
    font-weight: bold;
    background-color: #c6ebfe;
    color: #2073fe
}

.base-info, .base-info th, .base-info td {
    font-size: 0.95em;
    text-align: center;
    padding: 1.1vw;
    border-collapse: collapse;
}

.base-info th {
    border: 1px solid #c6ebfe;
    border-width: 1px
}

.base-info td {
    border: 1px solid #c6ebfe;
    border-width: 1px
}

.base-info tr {
    border: 1px solid #ffffff;
}

.base-info tr:nth-child(odd) {
    background-color: #f7f7f7;
}

.base-info tr:nth-child(even) {
    background-color: #ffffff;
}

.base-info tr td:nth-child(1) {
    width: 5vw;
}

.el-link {
    margin-right: 10px;
}

.el-link .el-icon--right.el-icon {
    vertical-align: text-bottom;
}

.el-button--text {
    margin-right: 15px;
}


.dialog-footer button:first-child {
    margin-right: 10px;
}

.demo-pagination-block + .demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}
</style>